<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
</head>
<body>
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
	</canvas>
	
	<script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d"); //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
		ctx.fillStyle="#FF0000"; //设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
		ctx.fillRect(10,10,190,50);   //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
	</script>
</body>
</html> 